<!DOCTYPE html>
<html lang="en">
  <head>
    <title>测试</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/style.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  </head>
  <body>
    
    <div id="app">
      <div class="app-container">
        <div class="logout">
          <el-button type="primary" @click="logout" :disabled="disabled">退出</el-button>
        </div>
        <h2>用户列表</h2>
        <el-table :data="list" border style="width:300px;margin: 20px 0 20px 780px;">
          <el-table-column label="用户名" align="center" prop="username"></el-table-column>
          <el-table-column label="职业" align="center" prop="position"></el-table-column>
        </el-table>
        <a href="/page/option.html">去option页面</a>
      </div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data () {
          return {
            list: [],
            token: undefined,
            disabled: false
          }
        },
        mounted () {
          this.token = sessionStorage.getItem("token")
          if (!this.token) {
            sessionStorage.clear()
            window.location.href = "/login.html"
            return
          }
          this.getData()
        },
        methods: {
          getData() {
            axios.get("/api/users",{headers: {token:'Bearer ' + this.token}}).then(res => {
              if (res.data.code == 200) {
                this.list = res.data.data
              } else {
                sessionStorage.clear()
                window.location.href = "/login.html"
              }
            }).catch(err => {
              console.log(err)
            })
          },
          logout () {
            this.disabled = true
            axios.post("/logout").then(res => {
              if (res.data.code == 200) {
                this.$message({
                  message: '退出成功',
                  type: 'success'
                })
                this.disabled = false
                sessionStorage.clear()
                window.location.href = "/login.html"
              }
            })
          } 
        },
      })
    </script>
  </body>
</html>